<template>
  <el-dialog
    v-model="centerDialogVisible"
    :title="title"
    width="90%"
    align-center
    :close-on-click-modal="false"
  >
    <el-form inline>
      <el-form-item label="请求方式">
        <el-radio-group v-model="action">
          <el-radio-button label="GET" value="get" />
          <el-radio-button label="POST" value="post" />
          <el-radio-button label="PUT" value="put" />
          <el-radio-button label="DELETE" value="delete" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="参数方式">
        <el-radio-group v-model="paramterType">
          <el-radio-button label="Body" value="body" />
          <el-radio-button label="Params" value="params" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="当前页">
        <el-input type="number" min="0" v-model="currentPage" />
      </el-form-item>
      <el-form-item label="每页条数">
        <el-input type="number" min="0" v-model="pageSize" />
      </el-form-item>
      <div style="float: right; margin-right: 20px">
        <el-button type="primary" @click="exe()">执行测试</el-button>
      </div>
    </el-form>
    <el-row>
      <el-col :span="12">
        <el-table :data="heads" style="width: 100%" height="250">
          <el-table-column prop="name" label="Head名称" width="150">
            <template #default="scope">
              <el-input v-model="scope.row.name" />
            </template>
          </el-table-column>
          <el-table-column prop="value" label="Head值">
            <template #default="scope">
              <el-input v-model="scope.row.value" />
            </template>
          </el-table-column>
          <el-table-column prop="value" width="120">
            <template #header>
              <el-button-group>
                <el-button @click="addHead">添加Head</el-button>
              </el-button-group>
            </template>
            <template #default="scope">
              <el-button @click="removeHead(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="12">
        <el-table :data="params" style="width: 100%" height="250">
          <el-table-column prop="name" label="参数名称" width="150">
            <template #default="scope">
              <el-input v-model="scope.row.name" />
            </template>
          </el-table-column>
          <el-table-column prop="value" label="参数值">
            <template #default="scope">
              <el-input v-model="scope.row.value" />
            </template>
          </el-table-column>
          <el-table-column prop="value" width="120">
            <template #header>
              <el-button-group>
                <el-button @click="addParam">添加参数</el-button>
              </el-button-group>
            </template>
            <template #default="scope">
              <el-button @click="removeParam(scope.$index)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-input v-model="message" type="textarea" aria-readonly="true" :rows="10" />
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import request from '@/axios'
import { ElLoading } from 'element-plus'
const centerDialogVisible = ref(false)

const designData = ref<any>({})

const url = ref('')

const message = ref('')

const currentPage = ref()

const pageSize = ref()

const title = computed(() => {
  return (
    designData.value.appName +
    '：' +
    designData.value.name +
    '[' +
    designData.value.code +
    ']' +
    '接口测试---测试地址：/' +
    designData.value.appName +
    url.value +
    '/' +
    designData.value.code
  )
})

const action = ref<string>('get')

const paramterType = ref<string>('body')

type ParamType = {
  name: string
  value: string
}

const heads = ref<ParamType[]>([])

const params = ref<ParamType[]>([])

const addHead = () => {
  heads.value.push({
    name: '',
    value: ''
  })
}

const removeHead = (index) => {
  heads.value.splice(index, 1)
}

const addParam = () => {
  params.value.push({
    name: '',
    value: ''
  })
}
const removeParam = (index) => {
  params.value.splice(index, 1)
}

const exe = async () => {
  const loading = ElLoading.service({
    lock: true,
    text: '开始测试，请稍后...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  const _url = '/' + designData.value.appName + url.value + '/' + designData.value.code

  const _params = {}
  params.value.forEach((head) => {
    _params[head.name] = head.value
  })

  const _heads = {}
  heads.value.forEach((head) => {
    _heads[head.name] = head.value
  })
  if (paramterType.value == 'body') {
    if (action.value == 'get') {
      const rs = await request.get({ url: _url, headers: _heads, data: _params }, loading)
      if (rs.success) {
        message.value = rs.data
      }
    } else if (action.value == 'put') {
      const rs = await request.put({ url: _url, headers: _heads, data: _params }, loading)
      if (rs.success) {
        message.value = rs.data
      }
    } else if (action.value == 'delete') {
      const rs = await request.delete({ url: _url, headers: _heads, data: _params }, loading)
      if (rs.success) {
        message.value = rs.data
      }
    } else if (action.value == 'post') {
      if (pageSize.value && currentPage.value) {
        _params['limit'] = {
          pageSize: pageSize.value,
          currentPage: currentPage.value
        }
      }
      const rs = await request.post({ url: _url, headers: _heads, data: _params }, loading)
      if (rs.success) {
        message.value = rs.data
      }
    }
  } else {
    if (action.value == 'get') {
      const rs = await request.get({ url: _url, headers: _heads, params: _params }, loading)
      if (rs.success) {
        message.value = rs.data
      }
    } else if (action.value == 'put') {
      const rs = await request.put({ url: _url, headers: _heads, params: _params }, loading)
      if (rs.success) {
        message.value = rs.data
      }
    } else if (action.value == 'delete') {
      const rs = await request.delete({ url: _url, headers: _heads, params: _params }, loading)
      if (rs.success) {
        message.value = rs.data
      }
    } else if (action.value == 'post') {
      const rs = await request.post({ url: _url, headers: _heads, params: _params }, loading)
      if (rs.success) {
        message.value = rs.data
      }
    }
  }
}

const show = (data, u) => {
  designData.value = data
  url.value = u
  message.value = ''
  centerDialogVisible.value = true
}
//关闭表单
const hide = () => {
  centerDialogVisible.value = false
}

//暴露方法
defineExpose({ show, hide })
</script>
